<div class="mt-3">
  <div class="row">
    <div class="col">
      <form [formGroup]="basicForm" id="basicForm" class="needs-validation" novalidate autocomplete="off">
        <div class="form-group">
          <label>Active by default: <span class="required">*</span></label>
          <div class="custom-control custom-switch">
            <input type="checkbox" formControlName="active" class="custom-control-input" id="typeActiveInput"/>
            <label class="custom-control-label" for="typeActiveInput"></label>
          </div>
        </div>
        <div class="form-group">
          <label for="typeLabelInput">Label: <span class="required">*</span></label>
          <input type="text" formControlName="label" class="form-control"
                 [ngClass]="{ 'is-valid': label.valid && (label.dirty || label.touched),
                 'is-invalid': label.invalid && (label.dirty || label.touched)}"
                 id="typeLabelInput" aria-describedby="typeLabelInputHelp" required>
          <div *ngIf="label.invalid && (label.dirty || label.touched)"
               class="invalid-feedback">
            <div class="float-right" *ngIf="label.errors.required">
              Label is required.
            </div>
          </div>
          <small id="typeLabelInputHelp" class="form-text text-muted">Only a display name</small>
          <div class="clearfix"></div>
        </div>
        <div class="form-group">
          <label for="typeNameInput">Name: <span class="required">*</span></label>
          <input type="text" formControlName="name" class="form-control"
                 [ngClass]="{ 'is-valid': name.valid && (name.dirty || name.touched),
                 'is-invalid': name.invalid && (name.dirty || name.touched) }"
                 id="typeNameInput" readonly lowercase required>
          <small id="typeNameInputHelp" class="form-text text-muted">Type name must be lowercase unique</small>
          <div *ngIf="name.invalid && (name.dirty || name.touched)"
               class="invalid-feedback">
            <div class="float-right" *ngIf="name.errors.required">
              Name is required.
            </div>
            <div class="float-right" *ngIf="name.errors.nameAlreadyTaken">
              A type with this name already exists.
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="form-group">
          <label for="exportdType">Type</label>
          <ng-select id="exportdType" [items]="typeSelect"
                     bindLabel="label"
                     bindValue="content"
                     formControlName="exportd_type">
            <ng-template ng-option-tmp let-item="item" let-index="index">
              {{item.label}} : {{item.description}}
            </ng-template>
          </ng-select>
          <small id="typeInputHelp" class="form-text text-muted">Default is PUSH: Run job directly.</small>
          <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
        <div class="form-group">
          <label for="typeDescriptionInput">Description:</label>
          <textarea class="form-control" formControlName="description" id="typeDescriptionInput" rows="3"
                    aria-describedby="typeDescriptionInputHelp"></textarea>
          <small id="typeDescriptionInputHelp" class="form-text text-muted">Small description of the type</small>
          <div class="clearfix"></div>
        </div>
      </form>
    </div>
  </div>
</div>
